<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			div {
				height: 300px; width: 300px;
				position: relative;
				margin: 100px 200px;
				overflow: hidden;
			}
			div>* {
				position: absolute;
				left: 0; top: 0;
			}
			div img {
				transform: scale(0.5);
				height: 300px; width: 300px;
			}
			div:hover img {
				transition: 2s;
				transform: scale(1) rotatey(360deg);
			}
			div p {
				color: white;
			}
			div h2 {
				color: white; width: 200px;
				position: absolute; left: 10px; top: 230px;
				/* transition: 1s; */
			}
			div p:nth-of-type(1) {
				/* position: absolute;
				left: -160px; top: 140px; */
				transform: translateX(-160px) translateY(140px);
				transition: 1s ;
			}
			div p:nth-of-type(2) {
				/* position: absolute;
				left: -160px; top: 170px; */
				transform: translateX(-160px) translateY(170px);
				transition: 1s 0.3s;
			}
			div p:nth-of-type(3) {
			/* 	position: absolute;
				left: -160px; top: 200px; */
				transform: translateX(-160px) translateY(200px);
				transition: 1s 0.6s;
			}
			div:hover p:nth-of-type(1) {
				/* position: absolute;
				left: 10px; top: 140px; */
				transform: translateX(10px) translateY(140px);
			}
			div:hover p:nth-of-type(2) {
				/* position: absolute;
				left: 10px; top: 170px; */
				transform: translateX(10px) translateY(170px);
			}
			div:hover p:nth-of-type(3) {
				/* position: absolute;
				left: 10px; top: 200px; */
				transform: translateX(10px) translateY(200px);
			}
		</style>
	</head>
	<body>
		<div id="">
			<img src="036位移效果/imgs/4.png" >
			<h2>Taylor Swift</h2>
			<p class="p1">Birthday:1989.12.13</p>
			<p class="p2">Height:180cm</p>
			<p class="p3">Weight:56kg</p>
		</div>
	</body>
</html>
